extends ../layout

block content
  .pb-2.mt-2.mb-4.border-bottom
    h2
      i.far.fa-envelope.fa-sm
      | Lob API
  .btn-group.d-flex(role='group')
    a.btn.btn-primary(href='https://lob.com/docs', target='_blank').w-100
      i.far.fa-check-square.fa-sm
      | API Documentation 
    a.btn.btn-primary(href='https://github.com/lob/lob-node', target='_blank').w-100
      i.fas.fa-code.fa-sm
      | Lob Node Docs
    a.btn.btn-primary(href='https://dashboard.lob.com/register', target='_blank').w-100
      i.fas.fa-cog.fa-sm
      | Create API Account
  .pb-2.mt-2.mb-4.border-bottom
  h3 Details of zip code: #{zipDetails.zip_code}
  br
  p Note that Lob.com's test API key does not perform any verification, automatic correction, or standardization for addresses. The responses from their test API will always be the response for
    a(href='https://lob.com/docs#us-verification-test-environment', target='_blank')
      |  PO BOX 720114, San Francisco, CA 94172-0114
  br
  p ID: #{zipDetails.id}
  p Zip Code Type: #{zipDetails.zip_code_type}
  table.table.table-striped.table-bordered
    thead
      tr
        th City
        th State
        th County
        th County Fips
        th Preferred
    tbody
      for cities in zipDetails.cities
        tr
          td= cities.city
          td= cities.state
          td= cities.county
          td= cities.county_fips
          td= cities.preferred
  .pb-2.mt-2.mb-4.border-bottom
  h3 First-Class Mail (USPS)
  br
  | Letter ID: #{uspsLetter.id}
  br
  | Will be mailed using: #{uspsLetter.mail_type}
  br
  | With expected delivery date of: #{uspsLetter.expected_delivery_date}
  #pdfviewer(style='display:none')
    object(width='600', height='850', type='application/pdf', data=uspsLetter.url)

  //Lob's back end has a few second delay from when they generate the letter to when it is availalble
  //Without this delay some of the PDF fetches result in 404s
  script(type='text/javascript').
    window.onload = function ()
    {
    setTimeout(function(){
    $("#pdfviewer").show();
    }, 3000);
    };